जब हम रिएक्ट में कंपोनेंट्स बनाते हैं, तो आम तौर पर वे कंपोनेंट ट्री के भीतर मौजूद होते हैं। यह ज्यादातर ठीक है, लेकिन कभी-कभी हम चाहते हैं कि किसी घटक के कुछ हिस्से दिखाई दें, या कहीं पूरी तरह से अलग हों। घटक पेड़ के बाहर यह एक सामान्य आवश्यकता है जब हम मोडल पॉपअप विंडो बनाते हैं, जिसे अन्य सभी घटकों से ऊपर होना चाहिए। हम इन्हें एक घटक के भीतर बना सकते हैं, लेकिन अंततः हम उन्हें बाकी सब से ऊपर चाहते हैं, और उन्हें कई घटकों के भीतर नेस्ट करने से समस्याएँ हो सकती हैं क्योंकि उनका जो कुछ भी भीतर है उससे नीचे गिर जाएगा: z-index इस समस्या को हल करने के लिए, हम का उपयोग करके अपने स्वयं के घटक से और अपने टेम्पलेट के दूसरे भाग में मोडल को कर सकते हैं। createPortal टेलीपोर्ट यह हमें हमारे घटक को कहीं भी रखने की अनुमति देता है, जैसे कि HTML ट्री का आधार, टैग के अंदर, या किसी अन्य तत्व के अंदर। body भले ही तत्व घटक ट्री के भीतर मौजूद हो, हमें इसे अपनी पसंद के अनुसार कहीं भी रखने की शक्ति देता है। createPortal प्रतिक्रिया पोर्टल का उपयोग करना आपको यह दिखाने के लिए कि पोर्टल कैसे काम करते हैं, विचार करें कि हमारे पास हमारी फ़ाइल के अंदर निम्नलिखित मूल प्रतिक्रिया कोड है। यहां, हम चाहते हैं कि मोडल बाकी सब चीजों के ऊपर दिखाई दे। जैसे, हमने नामक एक बनाया है। यह अंततः वह जगह है जहाँ हम चाहते हैं कि हमारे सभी मोडल इसमें जाएँ: App.js #modal-container div import logo from './logo.svg'; import './App.css'; import { useState } from 'react' import Modal from './components/Modal.js'; function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> </div> ); } export default App; के अंदर, मैंने नामक एक घटक आयात किया है। यह हमारा मॉडल घटक है, जो उपयोगकर्ता द्वारा बटन पर क्लिक करने पर किसी भी समय पॉप अप हो जाएगा। App.js Modal जब भी को का उपयोग करके सही पर सेट किया जाता है, तो मोडल दिखाई देना चाहिए। नहीं तो गायब हो जाएगा। isModalOpen setIsModalOpen() मेरे पास यह सुनिश्चित करने के लिए कुछ सीएसएस भी है कि हमारे मॉडल वास्तव में बाकी सब चीजों के शीर्ष पर दिखाई दें: #modal-container { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; height: 100%; pointer-events: none; } .modal { position: absolute; top: 200px; background: white; border-radius: 4px; left: calc(50% - 100px); width: 200px; } हमारा बनाना {ortal पोर्टल बनाना बहुत आसान है - एक फ़ंक्शन है, । रिएक्ट में कुछ डोम वापस करने के बजाय, हम इसके बजाय लौटाते हैं। createPortal() Portal दो तर्क स्वीकार करता है - DOM तत्व जिसे हम वापस करना चाहते हैं - इस मामले में, मोडल - और DOM तत्व जिसे हम अपने DOM तत्व को टेलीपोर्ट करना चाहते हैं। createPortal() तो, हमारा दूसरा तर्क है , क्योंकि हम अपने सभी मॉडलों को में रखना चाहते हैं: document.getElementById('modal-container') #modal-container import { createPortal } from 'react-dom'; function Modal({modalState, onClickEvent}) { if(!modalState) return null; return ( createPortal( <div className="modal"> <button onClick={onClickEvent}>Close Modal</button> <div className="modal-content">Modal Content goes here</div> </div>, document.getElementById('modal-container') ) ); }; export default Modal; हालाँकि हमने अपने DOM तत्व को पर टेलीपोर्ट किया, फिर भी यह एक सामान्य प्रतिक्रिया बच्चे की तरह व्यवहार करता है। चूंकि पोर्टल अभी भी रिएक्ट ट्री में मौजूद है, इसलिए तत्व जिस संदर्भ में है, वह अभी भी वही काम करता है। modal-container यह भी ध्यान दिया जाना चाहिए कि यद्यपि हमारे पास एक ही फ़ाइल में और हैं, जिस स्थान पर आप अपने DOM तत्व को टेलीपोर्ट करते हैं वह आपके रिएक्ट कोड में हो सकता है। modal-container Modal कहीं भी तो, आप इसे डीओएम में कहीं भी एक पूरी तरह से अलग उप-घटक, तत्व या माता-पिता को टेलीपोर्ट कर सकते हैं। यह बहुत शक्तिशाली और उपयोगी है - इसलिए इसका बुद्धिमानी से उपयोग करें। आइए हमारे HTML को देखें: App.js <!-- .... --> <button onClick={() => setIsModalOpen(!isModalOpen)}> Click to Open Modal </button> <Modal modalState={isModalOpen} onClickEvent={() => setIsModalOpen(!isModalOpen)}> This is Modal Content! </Modal> </header> <div id="modal-container"></div> अब, भले ही हमारे हेडर में बैठता है, यह में दिखाई देगा जब भी हम बटन का उपयोग करके मोडल खोलेंगे: Modal #modal-container निष्कर्ष रिएक्ट में पोर्टल एक बहुत शक्तिशाली उपकरण है। वे घटक-आधारित प्रणालियों के साथ मुख्य मुद्दे को हल करने का एक उपयोगी तरीका हैं - कुछ तत्वों को बाकी सभी से ऊपर ले जाना। इसलिए, मुझे आशा है कि आपने रिएक्ट पोर्टल्स के लिए इस गाइड का आनंद लिया होगा। यदि आप रिएक्ट सीख रहे हैं, तो मेरा सुझाव है कि पहले जावास्क्रिप्ट में महारत हासिल करें - जो आप मेरी पूरी के साथ कर सकते हैं। जावास्क्रिप्ट हैंडबुक आपका दिन अच्छा रहे।
